<template>
  <div>
    <Dialog
      v-model="visible"
      title="批量修改分类"
      width="600px"
      close-on-click-modal
      destroy-on-close
      @close="visible = false"
    >
      <div>
        <el-form ref="formRef" :rules="rules" :model="form">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="">
              <template #default="scope">
                <div>{{ scope.row.title }} </div>
              </template>
            </el-table-column>
            <el-table-column label="分类">
              <template #default>
                <div>
                  <el-form-item required prop="handClassification">
                    <el-cascader
                      v-model="form.handClassification"
                      placeholder="请选择分类"
                      :props="classificationCascaderProps"
                      :options="classificationList"
                      filterable
                      clearable
                    />
                  </el-form-item>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="mt-12px w-100% text-right">
            <el-text>
              <el-icon>
                <Warning />
              </el-icon>
              若手动调整，则最终分类分级以手动调整后的结果为准
            </el-text>
          </div>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="confirm"> 确定 </el-button>
        </span>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="tsx">
import { Warning } from '@element-plus/icons-vue'
import { assetUpdateClassifyList } from '@/api/assetDetail'
import { dataClassificationTree } from '@/api/dataStandards/classification/index'

const message = useMessage() // 消息弹窗
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  ids: {
    type: Array
  }
})

const emit = defineEmits(['update:modelValue', 'success'])
const visible = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emit('update:modelValue', newValue)
  }
})

const classificationCascaderProps = ref({
  checkStrictly: true,
  label: 'text',
  value: 'id',
  children: 'children',
  emitPath: false
})
const formRef = ref()
const rules = []
const form = ref({
  handClassification: ''
})
const tableData = [
  {
    title: '手动调整'
  }
]
const classOptions = [
  {
    label: '分类1',
    value: '1'
  },
  {
    label: '分类2',
    value: '2'
  },
  {
    label: '分类3',
    value: '3'
  }
]

const confirm = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log('form.ids', props.ids)
      const data = await assetUpdateClassifyList({ ids: props.ids, ...form.value })
      console.log('data', data)
      if (data) {
        message.success('修改成功')
        visible.value = false
        emit('success')
      }
    }
  })
}

const classificationList = ref([])
const getClassificationList = async () => {
  const data = await dataClassificationTree()
  classificationList.value = traverseTree(data)
}
function traverseTree(data) {
  const updatedTree = []
  for (let i = 0; i < data.length; i++) {
    const node = data[i] // 创建新节点并添加 disable 属性
    if (node.pid == '-1') {
      node.disabled = true
    }
    updatedTree.push(node)
    if (node.children && node.children.length > 0) {
      node.children = traverseTree(node.children) // 递归遍历子节点并更新子树结构
    }
  }
  return updatedTree
}

onMounted(() => {
  getClassificationList()
})
</script>
<style scoped lang="scss">
:deep(.el-table .el-form-item--default) {
  margin-bottom: 0 !important;
}
</style>
